<template>
	<view class="rankingList">
		<view class="title">
			<i class="iconfont iconzuojiantou" @tap="goBack"></i>
			<text>排行榜</text>
			<i></i>
		</view>
		<view class="tabBtn">
			<view :class="act==1?'active':''" @tap="tab('1')">魅力榜</view>
			<view :class="act==2?'active':''" @tap="tab('2')">财富榜</view>
		</view>
		<!-- 排行榜列表 -->
		<view class="imgList">
			<view class="one">
				<image src="../../static/img/two.png" class="one_img"></image>
				<image :src="img_1"  class="one_img1" ref='img1'></image>
				<!-- <image :src="../../static/img/auth.png"  class="one_img1" ref='img1'></image> -->
			</view>
			<view class="two">
				<image src="../../static/img/one.png" class="two_img"></image>
				<!-- <image src="../../static/img/auth.png"  class="two_img1" ref='img0'></image> -->
				<image :src="img_0"  class="two_img1" ref='img0'></image>
			</view>
			<view class="three">
				<image src="../../static/img/three.png" class="three_img"></image>
				<!-- <image src="../../static/img/auth.png"  class="three_img1" ref="img2"></image> -->
				<image :src="img_2"  class="three_img1" ref="img2"></image>
			</view>
		</view>
		<!-- 头像简述 -->
		<view class="describe">
			<view>
				<view v-if="topList[1]">{{topList[1].user_nickname}} <text>{{topList[1].age}}岁</text></view>
				<view v-else>大可乐 <text>23岁</text></view>
				<view v-if="topList[1]">{{topList[1].wealth}}</view>
				<view v-else>111</view>
			</view>
			<view>
				<view v-if="topList[0]">{{topList[0].user_nickname}} <text>{{topList[0].age}}岁</text></view>
				<view v-else>大可乐 <text>23岁</text></view>
				<view v-if="topList[0]">{{topList[0].wealth}}</view>
				<view v-else>222</view>
			</view>
			<view>
				<view v-if="topList[2]">{{topList[2].user_nickname}} <text>{{topList[2].age}}岁</text></view>
				<view v-else>小可爱 <text>20岁</text></view>
				<view v-if="topList[2]">{{topList[2].wealth}}</view>
				<view v-else>222</view>
			</view>
		</view>
		<view class="content">
			<!-- 列表 -->
		<template v-if="dataList.length>0">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="left">
					<view class="number">{{index+4}}</view>
					<view class="num_type">
						<view class="num_img">
							<image :src="item.avatar"></image>
							<!-- <image src="../../static/img/admin_msg.png"></image> -->
						</view>
						<view class="num_name">
							<view>{{item.user_nickname}}</view>
							<view>{{item.age}}岁</view>
						</view>
					</view>
				</view>
				<view class="right">
					{{item.wealth}}
				</view>
			</view>
		</template>
			<view v-else class="nodata">没有更多了</view>

		</view>

	</view>
</template>

<script>
	import utils from '../../components/utils/utils.js';
	export default {
		data() {
			return {
				act: 1,
				url: 'http://192.168.0.105',
				dataList:[],
				topList:[],
				img_0:'',
				img_1:'',
				img_2:''
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			tab(num) {
				this.act = num;
				this.getData();
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			//获取数据
			getData() {
				var that =this;
				uni.showLoading({
					title: "加载中...",
					icon: 'none'
				})
				uni.request({
					url: this.url + '/api/home/get_honour_list', //仅为示例，并非真实接口地址。
					data: {
						type: this.act,
						page: 1
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					method: "POST",
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							uni.hideLoading();
							this.dataList=[];
							this.topList=[];
							this.img_0='';
							this.img_1='';
							this.img_2='';
							var arr = res.data.data;
							this.topList = arr;
							this.$nextTick(function(){
								that.img_0 =arr[0].avatar?arr[0].avatar:require('../../static/img/auth.png');
								that.img_1=arr[1].avatar?arr[1].avatar:require('../../static/img/auth.png');
								that.img_2 =arr[2].avatar?arr[2].avatar:require('../../static/img/auth.png');
							})
							
							this.dataList =res.data.data.slice(3);
						}
					}
				});


			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		position: relative;
		background-color: #ED2C61;
	}

	.rankingList {
		width: 100%;
		background-color: #ED2C61;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-image: url(../../static/img/bgImg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: 100% 100%;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 50rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			color: #fff;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.tabBtn {
			display: flex;
			border: 1px solid #fff;
			color: #fff;
			width: 450rpx;
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 66rpx;
			font-size: 30rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 60rpx;
			overflow: hidden;

			view {
				text-align: center;
				width: 50%;
			}

			.active {
				background-color: #fff;
				color: #ED2C61;
			}

		}

		.imgList {
			display: flex;
			justify-content: space-around;
			margin-top: 40rpx;

			view {
				width: 33%;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				flex-shrink: 0;
			}

			.one_img {
				width: 136rpx;
				height: 177rpx;
				overflow: hidden;
				position: relative;
			}

			.two_img {
				width: 156rpx;
				height: 205rpx;
				overflow: hidden;
				position: relative;
			}

			.three_img {
				width: 136rpx;
				height: 177rpx;
				overflow: hidden;
				position: relative;
			}

			.one_img1 {
				width: 133rpx;
				height: 133rpx;
				border-radius: 50%;
				position: absolute;
			}

			.two_img1 {
				width: 153rpx;
				height: 155rpx;
				border-radius: 50%;
				position: absolute;
			}

			.three_img1 {
				width: 133rpx;
				height: 133rpx;
				border-radius: 50%;
				position: absolute;
			}

		}

		.describe {
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #fff;
			text-align: center;

			text {
				width: 60rpx;
				height: 28rpx;
				background: rgba(250, 159, 182, 1);
				border-radius: 14rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				margin-left: 15rpx;
				display: inline-block;
			}
		}

		.content {
			border-radius: 20rpx;
			width: 90%;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
		}

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx 20rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.number {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-right: 50rpx;
				}

				.num_type {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.num_img {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.num_name {
						font-family: PingFang SC;
						font-weight: 500;

						view {
							&:nth-child(1) {
								font-size: 32rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: rgba(51, 51, 51, 1)
							}

							&:nth-child(2) {
								font-size: 20rpx;
								font-family: Adobe Heiti Std;
								font-weight: normal;
								color: rgba(255, 255, 255, 1);
								line-height: 33rpx;
								background-color: #FA9FB6;
								border-radius: 14rpx;
								text-align: center;
								margin-top: 10rpx
							}
						}
					}
				}
			}

			.right {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(237, 44, 97, 1);
			}
		}
		.nodata{
			text-align: center;
			font-size: 26rpx;
			color:#fff;
			margin-top:50rpx;
		}

	}
</style>
